<template>
    <el-dialog
        title="编辑内容"
        :visible="state"
        width="795px"
        :close-on-click-modal="false"
        @open="onOpen"
        @close="onCancel">
        <span slot="footer" class="dialog-footer">
        <el-button @click="onCancel">{{ $i18n.t('button.cancel') }}</el-button>
        <el-button type="primary" @click="onSave">{{ $i18n.t('button.sure') }}</el-button>
      </span>
        <div class="edit-container">
            <el-row class="form-row" :gutter="8">
                <el-col :span="13" class="row-title">{{ $i18n.t('label.formField') }}</el-col>
                <el-col :span="11" class="row-title">{{ $i18n.t('label.mailContentPlaceHolder') }}</el-col>
            </el-row>
            <el-row :gutter="8" class="form-row">
                <el-col :span="13">
                    <el-select :placeholder="$i18n.t('label.selectFormFieldTip')" v-model="selectValue">
                        <el-option v-for="item in formFields"
                                   :key="item.field"
                                   :label="item.name"
                                   :value="item.field">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="7">
                    <el-input disabled :value="selectValue"/>
                </el-col>
                <el-col :span="4">
                    <el-button class="add-btn" plain
                               size="medium"
                               :disabled="selectValue === ''"
                               @click="addField">
                        {{ $i18n.t('label.appendContent') }}
                    </el-button>
                </el-col>
            </el-row>
            <rich-editor v-model="data" v-if="state" @change="onChange"></rich-editor>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
import RichEditor from "@/components-sys/rich-editor/rich-editor.vue";
import FormFieldModel from '../model/form-field.model';
import _ from 'lodash';


@Component({components: {RichEditor}})
export default class MailContent extends Vue {
    
    /**
     * 弹窗状态
     */
    @Prop()
    public state: boolean;
    /**
     * 表单字段
     */
    @Prop()
    public formFields: FormFieldModel[];
    /**
     * 邮件内容
     */
    @Prop({default: ''})
    public mailData: string;
    /**
     * 邮件内容
     */
    public data = '';
    
    private selectValue = '';
    
    /**
     * 追加字段内容
     */
    private addField() {
        if (!_.isEmpty(this.selectValue)) {
            this.data = this.data === null ? '' : this.data.concat(`{${this.selectValue}}`);
        }
    }
    
    private onOpen() {
        this.selectValue = this.formFields[0].field;
        this.data = _.cloneDeep(this.mailData) || '';
    }
    
    /**
     * 接收值
     */
    private onChange(richData: string) {
        this.data = richData || '';
    }
    
    @Emit()
    private onCancel() {
    }
    
    @Emit()
    private onSave(): string {
        return this.data;
    }
    
}
</script>
<style lang="scss" scoped>
@import "../css/workflow-csss";

.edit-container {
    .form-row {
        margin-bottom: 12px;
        
        .row-title {
            font-size: 16px;
            font-weight: bold;
            color: $title-color;
        }
        
        .add-btn {
            height: 40px;
        }
    }
    
}
</style>
    

